<template>
  <div class="mobile-container">
    <van-skeleton :row="30" :loading="state.value.loading" >
      <van-cell-group :title="applyinfo.title">
        <van-cell v-for="( value,name,index) in applyinfo.value" :title="name">
          {{value}}
        </van-cell>
        <van-cell ><van-button @click="submit" size="large" :disabled="!state.value.isShowDraft">确认提交</van-button></van-cell>
        <van-cell ><van-button @click="edit" size="large" :disabled="!state.value.isShowDraft">重新编辑</van-button></van-cell>
        <van-cell ><van-button @click="recall" size="large" :disabled="!state.value.isShowDraft">撤销申请</van-button></van-cell>
      </van-cell-group>
      {{state.value.rspApply.status.type}}
      <template v-if="state.value.rspApply.status.type != 1">
        <statusTree :formid="router.currentRoute.value.query.formid" :application_id="router.currentRoute.value.query.applyid"></statusTree>
      </template>
    </van-skeleton>
  </div>
</template>

<script lang="ts">
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {Notify,Dialog} from "vant";
import {reactive, ref} from "vue";
import statusTree from "@/views/mobile/form/mobile_status_tree.vue"
import {IRspApplication} from "@/lib/recover";

export default {
  name: "mobile_viewform",
  setup() {
    const debug = true;
    const router = useRouter();
    const store = useStore();
    const query = reactive({value:{} as any});
    const state = reactive({
      value:{
        loading:true,
        isShowDraft:true,
        rspApply:{} as IRspApplication,
      }})
    const applyinfo = reactive({value:{} as any,title:"",type:1});
    if(!!router.currentRoute.value.query.formid && !!router.currentRoute.value.query.applyid){
      query.value.formid = router.currentRoute.value.query.formid;
      query.value.applyid = router.currentRoute.value.query.applyid
    }else{
      Notify("参数错误,3秒后跳转至我的")
      setTimeout(()=>{router.push({path:"/owner"})},3000)
    }
    fetch("api/user/self/application/single/"+query.value.applyid).then(res=>{
      if(res.status == 200){
        return res.json();
      }
    }).then(json=>{
      if (debug){
        console.log(json)
      }
      state.value.rspApply = json;
      applyinfo.title = json.form.title
      applyinfo.value = json.content
      if(json.status.type!=1){
        state.value.isShowDraft = false;
      }
      state.value.loading=false;
    })
    const submit=function (){
      Dialog.confirm({
        title:'确认正式提交您的请求？',
        message:'如果点击确认，你的申请状态将会由草稿转为等待审核，社长将会处理你的申请'
      }).then(()=>{
        fetch("api/user/self/application/single/" +
            query.value.applyid +
            "/publish",
            {
              method:"POST"
            }).then(res=>{
              if(res.status == 200) {
                router.push({path:"/owner/viewapply"})
              }
        })
      }).catch(()=>{

      })
    };
    const edit = function (){
      router.push({
        name:'提交表单',
        path:'/form',
        params:{
          data:JSON.stringify(applyinfo.value),
          formid:query.value.formid,
          applyid:query.value.applyid
        }
      })
    };
    const recall = function (){
      Dialog.confirm({
        title: '申请撤销确认',
        message: '如果确定要撤销，请点击确认，撤销后状态无法恢复',
      })
          .then(() => {
            fetch("api/user/self/application/single/"+router.currentRoute.value.query.applyid,{
              method:'DELETE'
            }).then(res=>{
              if(res.status == 204){
                Dialog({message:"撤销成功"})
              }else{
                Dialog({message:"撤销失败"})
              }
            })
          })
          .catch(() => {
            // on cancel
          });
      // /
    }
    return {
      router,applyinfo,state,submit,edit,recall
    }
  },
  components: {
    statusTree
  }
}
</script>

<style scoped>
.mobile-container {
  padding-top: 30px;
  padding-bottom: 200px;
}
</style>